<template>
    <div class="app">
        <myNavbar title="查询物流"></myNavbar>
        <list>
            <cell>
                <div class="details_box">
                    <block v-for="(item,index) in axis" wx:for-index="index" wx:key="*this">
                        <div class="details_item">
                            <div class="details_item_left">
                                <icon style="width: 50px;height:50px" :class="[index == 0?'details_item_icon':'details_item_no_icon']" content="md-paper-plane"></icon>
                                <!--                           <text class="iconfont icon-daohang {{index == 0?'details_item_icon':'details_item_no_icon'}}"></text>-->
                                <div class="details_item_line"></div>
                            </div>
                            <div class="details_item_right">
                                <text class="details_item_date">{{item.time}}</text>
                                <text :class="[index == 0?'details_item_content':'details_item_no_content']">{{item.context}}</text>
                            </div>
                        </div>
                    </block>
                </div>
            </cell>
        </list>
    </div>

</template>

<script>
    import {
        delivery_query
    } from '../../../api/shipping'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data(){
            return{
                axis: [],
                trackimgno:''
            }
        },
        created(){
            this.trackimgno = eeui.getPageInfo('logisticsList').params
            this.loadList(this.trackimgno)
        },
        components:{
          myNavbar
        },
        methods:{
            loadList(data) {
                var _this = this
                delivery_query({ trackingNo: data }).then(res => {
                    if (res.type == 'success') {
                        _this.axis = res.data.data
                    }
                }).catch(error => {
                    eeui.toast(error.content)
                })
            },
        }
    }
</script>

<style scoped>
    .page,body {
        background-color: rgba(248, 248, 248, 0.8);
    }

    .details_box {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        padding: 25px;
        box-sizing: border-box;
        margin-top: 25px;
    }

    .details_item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
    }

    .details_item_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_item_icon {
        font-size: 40px;
        color: red;
    }

    .details_item_no_icon {
        font-size: 40px;
        color: #888888;
    }

    .details_item_line {
        width: 2px;
        height: 106px;
        background-color: rgba(232, 234, 237, 1);
    }

    .details_item_right {
        display: flex;
        flex-direction: column;
        width: 600px;
        margin-right: 30px;
    }

    .details_item_date {
        font-size: 20px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        display: block;
        height: 40px;
        line-height: 44px;
    }

    .details_item_content {
        font-size: 24px;
        font-weight: 400;
        color: rgba(235, 89, 79, 1);
        line-height: 36px;
        margin-top: 10px;
    }

    .details_item_no_content {
        font-size: 24px;
        font-weight: 400;
        color:rgba(26,26,30,1);
        line-height: 36px;
        margin-top: 10px;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
